body {
  width: 100vw;
  height: 100vh;
  display: grid;
  justify-content: center;
  align-content: center;
}

.slide {
  position: relative;
  // transform-style: preserve-3d;
  // transition: 1s;
  // transform: perspective(900px) rotateY(45deg);
  &:hover {
    // transform: perspective(900px) rotateX(-145deg);
  }
  display: flex;
  section {
    position: relative;
    transform-style: preserve-3d;
    div {
      overflow: hidden;
      position: absolute;
      @for $i from 1 to 5 {
        &:nth-child(#{$i}) {
          transform: rotateX(#{$i * 90}deg);
        }
      }
    }
  }
  .btns {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    display: flex;
    justify-content: space-between;
    height: 30px;
    span {
      background: rgb(121, 51, 201);
      width: 30px;
      height: 30px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
      cursor: pointer;
      transition: 0.5s;
      &.active {
        background: #000;
      }
    }
  }
}
